<template>
    <!-- 导航 -->
    <van-nav-bar title="我的订单" left-text left-arrow @click-left="back"></van-nav-bar>

    <van-tabs v-model:active="active" @click-tab="onClickTab">
        <van-tab v-for="item in statuslist" :title="item.title" :key="item.id" :name="item.id">
            <van-card
                v-for="(order, index) in orderlist"
                :key="index"
                :price="order.total"
                :desc="'商品名称：' + order.product.name"
                :title="'订单号：' + order.code"
                :thumb="order.product.cover_cdn"
            >
                <template #tags>
                    <p>下单时间：{{ order.createtime }}</p>
                </template>
                <template #num>
                    <van-tag plain type="danger">{{ order.status_text }}</van-tag>
                </template>
                <template #footer>
                    <van-button size="mini" :data-orderid="order.id" @click="ToInfo(order.id)">订单详情</van-button>

                    <van-button v-if="order.status < 4 && order.status > 0" size="mini">申请退货</van-button>

                    <van-button v-if="order.status == 2" size="mini" @click="confirm(order.id)">确认收货</van-button>

                    <van-button v-if="order.status == 3" size="mini">待评价</van-button>

                    <van-button v-if="order.status == 2" size="mini">查看物流</van-button>
                </template>
            </van-card>
        </van-tab>
    </van-tabs>
</template>
<script>
export default {
    emits: ['toggle'],
    created() {
        this.$emit('toggle', false);
        this.orderData();
    },
    data() {
        return {
            active: 0,
            statuslist: [
                {
                    id: 0,
                    title: '全部'
                },
                {
                    id: 1,
                    title: '待发货'
                },
                {
                    id: 2,
                    title: '待收货'
                },
                {
                    id: 3,
                    title: '待评价'
                },
                {
                    id: 4,
                    title: '已评价'
                },
                {
                    id: -1,
                    title: '已退货'
                }
            ],
            orderlist: [],
            LoginUser: this.$cookies.get('LoginUser'),
        }
    },
    methods: {
        back() {
            this.$router.push('/user/base/index')
        },
        onClickTab(val) {
            this.orderData();
        },
        async orderData() {
            let data = {
                userid: this.LoginUser.id,
                status: this.active
            }

            let result = await this.$api.OrderList(data)
            if (result.code == '1') {
                this.orderlist = result.data
            } else {
                this.$notify({
                    message: result.msg,
                    duration: 1000,
                })
                return false
            }
        },
        ToInfo(id) {
            this.$router.push({
                path: '/user/order/info',
                query: {
                    id: id
                }
            })
        },
        confirm(id) {
            this.$dialog.confirm({
                title: '确认收货',
                message:
                    '是否确认确认收货',
            })
                .then(() => {
                    let data = {
                        id: id,
                        userid: this.LoginUser.id
                    }
                    
                })
        }
    }
}
</script>